Shop Full Page

<div class="container py-4">
  <!-- i. Breadcrumb Section -->
  <nav aria-label="breadcrumb" class="mb-4">
    <ol class="breadcrumb bg-light p-3 rounded-3">
      <li class="breadcrumb-item"><a href="#" class="text-decoration-none">Home</a></li>
      <li class="breadcrumb-item active" aria-current="page">Shop</li>
    </ol>
  </nav>

  <div class="row">
    <!-- iii. Product Filter Sidebar -->
    <aside class="col-lg-3 d-none d-lg-block">
      <div class="card border-0 shadow-sm rounded-4 p-3 mb-4">
        <h5 class="fw-bold mb-3 border-bottom pb-2">Filter by Price</h5>
        <input type="range" class="form-range mb-2" min="0" max="1000" id="priceRange">
        <div class="d-flex justify-content-between small text-muted">
          <span>$0</span>
          <span>$1000</span>
        </div>
      </div>

      <div class="card border-0 shadow-sm rounded-4 p-3 mb-4">
        <h5 class="fw-bold mb-3 border-bottom pb-2">Colors</h5>
        <div class="d-flex flex-wrap gap-2">
          <button class="btn btn-dark rounded-circle p-2" style="width: 25px; height: 25px;"></button>
          <button class="btn btn-primary rounded-circle p-2" style="width: 25px; height: 25px;"></button>
          <button class="btn btn-danger rounded-circle p-2" style="width: 25px; height: 25px;"></button>
          <button class="btn btn-warning rounded-circle p-2" style="width: 25px; height: 25px;"></button>
          <button class="btn btn-info rounded-circle p-2" style="width: 25px; height: 25px;"></button>
        </div>
      </div>

      <div class="card border-0 shadow-sm rounded-4 p-3 mb-4">
        <h5 class="fw-bold mb-3 border-bottom pb-2">Size</h5>
        <div class="form-check small mb-2">
          <input class="form-check-input" type="checkbox" id="sizeS">
          <label class="form-check-label" for="sizeS">Small (S)</label>
        </div>
        <div class="form-check small mb-2">
          <input class="form-check-input" type="checkbox" id="sizeM">
          <label class="form-check-label" for="sizeM">Medium (M)</label>
        </div>
        <div class="form-check small mb-2">
          <input class="form-check-input" type="checkbox" id="sizeL">
          <label class="form-check-label" for="sizeL">Large (L)</label>
        </div>
      </div>
    </aside>

    <!-- Right Side Main Content -->
    <main class="col-lg-9">
      <!-- ii. Search & Sort By Dropdown Section -->
      <div class="card border-0 shadow-sm rounded-4 p-3 mb-4">
        <div class="row align-items-center g-3">
          <div class="col-md-6">
            <div class="input-group">
              <input type="text" class="form-control border-end-0" placeholder="Search products...">
              <span class="input-group-text bg-white border-start-0 text-muted">
                <i class="bi bi-search"></i>
              </span>
            </div>
          </div>
          <div class="col-md-6 text-md-end">
            <div class="d-inline-flex align-items-center gap-2">
              <label class="text-nowrap small fw-bold">Sort By:</label>
              <select class="form-select form-select-sm border-0 bg-light shadow-none">
                <option>Newest Arrivals</option>
                <option>Price: Low to High</option>
                <option>Price: High to Low</option>
                <option>Best Rating</option>
              </select>
            </div>
          </div>
        </div>
      </div>

      <!-- iv. Product Grid -->
      <div class="row g-4">
        <!-- Product Card Loop x 6 -->
        <div class="col-sm-6 col-md-4">
          <div class="card border-0 shadow-sm h-100 rounded-4 overflow-hidden shop-card">
            <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=400" class="card-img-top" alt="Product">
            <div class="card-body text-center">
              <h6 class="fw-bold mb-2">Red Sport Shoes</h6>
              <p class="text-primary fw-bold mb-3">$85.00</p>
              <button class="btn btn-outline-dark btn-sm rounded-pill w-100">Add to Cart</button>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-4">
          <div class="card border-0 shadow-sm h-100 rounded-4 overflow-hidden shop-card">
            <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400" class="card-img-top" alt="Product">
            <div class="card-body text-center">
              <h6 class="fw-bold mb-2">Luxury Smart Watch</h6>
              <p class="text-primary fw-bold mb-3">$150.00</p>
              <button class="btn btn-outline-dark btn-sm rounded-pill w-100">Add to Cart</button>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-4">
          <div class="card border-0 shadow-sm h-100 rounded-4 overflow-hidden shop-card">
            <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400" class="card-img-top" alt="Product">
            <div class="card-body text-center">
              <h6 class="fw-bold mb-2">Studio Wireless Headphones</h6>
              <p class="text-primary fw-bold mb-3">$299.00</p>
              <button class="btn btn-outline-dark btn-sm rounded-pill w-100">Add to Cart</button>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-4">
          <div class="card border-0 shadow-sm h-100 rounded-4 overflow-hidden shop-card">
            <img src="https://images.unsplash.com/photo-1526170315870-ef6d82f58326?w=400" class="card-img-top" alt="Product">
            <div class="card-body text-center">
              <h6 class="fw-bold mb-2">Vintage Camera Pack</h6>
              <p class="text-primary fw-bold mb-3">$450.00</p>
              <button class="btn btn-outline-dark btn-sm rounded-pill w-100">Add to Cart</button>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-4">
          <div class="card border-0 shadow-sm h-100 rounded-4 overflow-hidden shop-card">
            <img src="https://images.unsplash.com/photo-1525966222134-fcfa99b8ae77?w=400" class="card-img-top" alt="Product">
            <div class="card-body text-center">
              <h6 class="fw-bold mb-2">Classic Leather Sneakers</h6>
              <p class="text-primary fw-bold mb-3">$95.00</p>
              <button class="btn btn-outline-dark btn-sm rounded-pill w-100">Add to Cart</button>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-4">
          <div class="card border-0 shadow-sm h-100 rounded-4 overflow-hidden shop-card">
            <img src="https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=400" class="card-img-top" alt="Product">
            <div class="card-body text-center">
              <h6 class="fw-bold mb-2">Canvas Tote Bag</h6>
              <p class="text-primary fw-bold mb-3">$45.00</p>
              <button class="btn btn-outline-dark btn-sm rounded-pill w-100">Add to Cart</button>
            </div>
          </div>
        </div>
      </div>

      <!-- Pagination -->
      <nav class="mt-5">
        <ul class="pagination justify-content-center">
          <li class="page-item disabled"><a class="page-link shadow-none rounded-start-pill" href="#">Previous</a></li>
          <li class="page-item active"><a class="page-link shadow-none" href="#">1</a></li>
          <li class="page-item"><a class="page-link shadow-none" href="#">2</a></li>
          <li class="page-item"><a class="page-link shadow-none" href="#">3</a></li>
          <li class="page-item"><a class="page-link shadow-none rounded-end-pill" href="#">Next</a></li>
        </ul>
      </nav>
    </main>
  </div>

  <!-- v. Popular Brands Slider (Native Carousel Styling for Brands) -->
  <div class="py-5 mt-5 border-top">
    <h4 class="fw-bold text-center mb-5 uppercase">Popular Brands</h4>
    <div class="row row-cols-2 row-cols-md-5 align-items-center justify-content-center g-4 text-center grayscale-brands">
      <div class="col"><img src="https://upload.wikimedia.org/wikipedia/commons/2/20/Adidas_Logo.svg" alt="Brand" height="40"></div>
      <div class="col"><img src="https://upload.wikimedia.org/wikipedia/commons/9/94/Puma_Logo.svg" alt="Brand" height="40"></div>
      <div class="col"><img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/Logo_NIKE.svg" alt="Brand" height="25"></div>
      <div class="col"><img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg" alt="Brand" height="40"></div>
      <div class="col"><img src="https://upload.wikimedia.org/wikipedia/commons/0/08/Samsung_Logo.svg" alt="Brand" height="20"></div>
    </div>
  </div>
</div>

<style>
  .breadcrumb-item+.breadcrumb-item::before {
    content: ">";
  }

  .shop-card img {
    transition: transform 0.3s ease;
  }

  .shop-card:hover img {
    transform: scale(1.05);
  }

  .grayscale-brands img {
    filter: grayscale(1);
    opacity: 0.5;
    transition: all 0.3s ease;
  }

  .grayscale-brands img:hover {
    filter: grayscale(0);
    opacity: 1;
  }

  .page-link {
    border: none;
    color: #333;
  }

  .page-item.active .page-link {
    background-color: #0d6efd;
  }

</style>